<template>
  <div class="left-aside-container">
    <JimiLeftHeader @search="handleSearch"/>
    <div class="contract-list-container">
      <ul>
        <li v-for="(item,index) in computedFilteredContracts" :key="index">
          <div class="user-info-item" @click="SwitchContact(item)">
            <el-avatar class="user-info-item-avatar" shape="square" :src="item.avatar"/>
            <el-text>{{ item.username }}</el-text>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import JimiLeftHeader from "@/views/customer/components/JimiLeftHeader.vue";
import UserAvatar from "@/assets/img/dongdong-female.png";
import { reactive, ref, computed, defineEmits } from 'vue';

const contracts = reactive([
  {
    avatar: UserAvatar,
    username: "京东京造自营店"
  },
  {
    avatar: UserAvatar,
    username: "aaaaa"
  },
  {
    avatar: UserAvatar,
    username: "bbbbb"
  },
  {
    avatar: UserAvatar,
    username: "cccccc"
  },
  {
    avatar: UserAvatar,
    username: "京东京造自营店"
  },
  {
    avatar: UserAvatar,
    username: "aaaaa"
  },
  {
    avatar: UserAvatar,
    username: "bbbbb"
  },
  {
    avatar: UserAvatar,
    username: "cccccc"
  }
]);

const emits = defineEmits(['SwitchContact']); // 定义可以触发的事件

const SwitchContact = (item) => {
  emits('SwitchContact', item);
}

const searchKeyword = ref('');
const filteredContracts = computed(() => {
  return searchContracts(searchKeyword.value);
});

const searchContracts = (keyword) => {
  console.log(keyword);
  return contracts.filter(contract => contract.username.includes(keyword));
}

const handleSearch = (keyword) => {
  console.log(keyword);
  searchKeyword.value = keyword;
}

const computedFilteredContracts = computed(() => {
  return filteredContracts.value;
});


</script>
<style scoped>
.left-aside-container {
  height: 100%;
  background-color: #DBD0D9;
}
ul,li{
  list-style: none;
  padding: 4px;
}
.user-info-item{
  display: flex;
  padding: 4px;
  align-items: center;
  justify-content: left;
  cursor: pointer;
}
.user-info-item-avatar{
  width: 30px;
  height: 30px;
  margin-right: 4px;
}
li:hover
{
  background-color: #b7c0ce;
}
</style>
